<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="../node_modules/vue/dist/vue.js"></script>
    <script src="../node_modules/vue-router/dist/vue-router.js"></script>
</head>
<body>
    <div id="app">
        <router-link to="/ss">首页</router-link>
        <router-link to="/sss">页面1</router-link>
        <router-link to="/ssss">页面2</router-link>

        <router-view></router-view>
    </div>
</body>
    <script type="text/javascript">
       const S1 = Vue.component("s1",{template:"<h1 style='color: yellow'>美少女万华镜</h1>"})
       const S2 =Vue.component("s2",{template:"<h1 style='color: deepskyblue'>莲华</h1>"})
       const S3 =Vue.component("s3",{template:"<h1 style='color: yellowgreen'>雾枝</h1>"})

     const ROUTER = new VueRouter({
          routes:[
              {path:"/ss", component: S1},
              {path:"/sss", component: S2},
              {path:"/ssss", component: S3}
          ]
      })
       new Vue({
           el:"#app",
           data:{

           },
           router:ROUTER
       })
    </script>

</html>